<template>
  <!-- // 地图 -->
  <div class="homePageCards">
    <div class="grollDiv">
      <div class="">
        <!-- <el-checkbox-group v-model="checkList">
          <el-checkbox label="复选框 A" v-for="(item, index) in resourceTypes" :key="index">
          </el-checkbox>
        </el-checkbox-group> -->
        <label class="checklist iCheck" v-for="(item, index) in resourceTypes" :key="index">
          <input class="checkbox" type="checkbox" v-model="item.value" @change="check(item)" />
          <span class="fontSize18 fontWeight">{{ item.name }}</span>
        </label>
      </div>
    </div>
    <div class="full-box">
      <img src="../../../../assets/img/full.png" alt="">
      <span @click="fullscreen">全屏</span>
    </div>
    <div class="full">
      <div class="full-boxs">
        <img src="../../../../assets/map/red.svg" alt="">
        <span>红色预警</span>
      </div>
      <div class="full-boxs">
        <img src="../../../../assets/map/orange.svg" alt="">
        <span>橙色预警</span>
      </div>
      <div class="full-boxs">
        <img src="../../../../assets/map/yellow.svg" alt="">
        <span>黄色预警</span>
      </div>
      <div class="full-boxs">
        <img src="../../../../assets/map/blue.svg" alt="">
        <span>蓝色预警</span>
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import sjccKey from "../../../../config/sjmapkey";
export default {
  name: "MapContent",
  components: {
  },
  data: function () {
    return {
      map: null,
      geo: null,
      geocodingTask: null,
      resourceTypes: [
        {
          name: "省公司",
          value: true
        },
        {
          name: "地市级",
          value: false
        },
        {
          name: "县公司",
          value: false
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    typeNames() {
      return this.resourceTypes.filter(i => i.value === true);
    }
  },
  methods: {
    fullscreen() { // 进入全屏
      var docElm = document.getElementById("map"); // 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) { // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) { // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) { // 兼容IE11
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.FullScreen = !this.FullScreen;
      }
    },
    check(val) {
      this.resourceTypes.forEach(element => {
        if (element.name !== val.name) {
          element.value = false;
        }
      });
      const param = this.typeNames;
      this.$emit("typeNames", param);
    },
    init() {
      epgis.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then(res => { this.initMap(); });
    },
    // 申请的key和sn
    initMap() {
      var map;
      map = new epgis.Map({
        container: "map",
        style: "aegis://styles/aegis/Streets",
        zoom: 6,
        center: [112.20, 31.03],
        localIdeographFontFamily: "Microsoft YoHei",
        transition: {
          duration: 0,
          delay: 0
        }
      });

      map.on("load", function (e) {
        // 行政区划面
        map.addLayer({
          id: "power-polygon",
          type: "fill",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: []
            }
          },
          paint: {
            "fill-color": "#D8E5FA",
            "fill-opacity": 0.7
          }
        });
        // 行政区划边界线
        map.addLayer({
          id: "power-line",
          type: "line",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: []
            }
          },
          paint: {
            "line-color": "#0864FC",
            "line-width": 1,
            "line-dasharray": [3, 3] // 控制虚线的疏密
          }
        });


        var districtTask = new epgis.DistrictTask();
        // 行政区划名称查询行政区划
        districtTask
          .searchDistrict({
            keyword: "湖北省",
            // 建议直辖市取2，其他省份取1，提升请求速度
            subdistrict: 1,
            extension: true,
            isEncode: false
          })
          .then(function (result) {
            var features = [];
            var featuresSymbol = [];
            var featuresPolygon = [];
            // 外层遮罩方形边界
            var outSideShape = [
              [
                [109.08605140490641, 46.53186534100985],
                [123.33266999835769, 46.53186534100985],
                [123.33266999835769, 20.931139019287684],
                [109.08605140490641, 20.931139019287684],
                [109.08605140490641, 46.53186534100985]
              ]
            ];
            // 主要区分直辖市和其他省份
            var district =
              result.districts[0].sub_districts.length == 1
                ? result.districts[0].sub_districts[0]
                : result.districts[0];

            // 限制最大显示范围，也可以初始化地图的时候用maxZoom设置一个最大展示层级

            [
              [
                [
                  [114.11207138646921, 40.065237806396226],
                  [116.72681748022632, 37.74008299506812],
                  [117.2981065427258, 40.28349411053313],
                  [114.11207138646921, 40.065237806396226]
                ],
                [
                  [115.7380479489683, 39.601231454588486],
                  [116.04566513646796, 38.800962434658345],
                  [116.46314560521847, 39.397774551259886],
                  [115.7380479489683, 39.601231454588486]
                ],
                [
                  [116.09679457406003, 40.011275336098436],
                  [116.94001453362631, 40.12218833742756],
                  [116.8477873505488, 39.68759333327145],
                  [116.09679457406003, 40.011275336098436]
                ]
              ],
              [
                [
                  [113.45289169896989, 38.912180792258226],
                  [112.3322862302208, 37.9829452941092],
                  [113.65064560521967, 37.65315263407108],
                  [114.28785263646904, 38.569415115707926],
                  [113.45289169896989, 38.912180792258226]
                ]
              ]
            ];
            /**
             * 根据行政区划服务数据，调整数据结构，目的是构建对应单面和混合面的数组层级。
             * 三维数组，单面geometry结构：
             * 四维数组，geometry: {
                  type: "Polygon",
                  coordinates: [
                    [
                      [lng, lat],
                      ...
                    ],
                  ],
                }
             * 混合多面geometry结构：
             * geometry: {
                type: "MultiPolygon",
                coordinates: [
                  [
                    [
                      [lng, lat],
                      ...
                    ]
                    ...
                  ],
                  ...
                ],
              }
             *
            */
            for (var o in district.sub_districts) {
              const shape = district.sub_districts[o].shape;
              // const shapeMultiPolygon = [];

              // 标注
              featuresSymbol.push({
                type: "Feature",
                geometry: {
                  coordinates: district.sub_districts[o].center,
                  type: "Point"
                },
                properties: {
                  name: district.sub_districts[o].name
                }
              });
              // 边界
              if (shape.type == "MultiPolygon") {
                for (const o in shape.coordinates) {
                  features = features.concat(shape.coordinates[o]);
                }
              } else {
                features.push(shape.coordinates[0]);
              }
            }
            // 面数据和遮罩
            if (district.shape.type == "MultiPolygon") {
              for (const o in district.shape.coordinates) {
                outSideShape = outSideShape.concat(district.shape.coordinates[o]);
                featuresPolygon = featuresPolygon.concat(district.shape.coordinates[o]);
              }
            } else {
              outSideShape = outSideShape.concat(district.shape.coordinates);
              featuresPolygon = featuresPolygon.concat(district.shape.coordinates);
            }
            // 更新视图

            // 行政区划面
            map.getSource("power-polygon").setData({
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    type: "Polygon",
                    coordinates: featuresPolygon
                  }
                }
              ]
            });

            // 行政区划边界
            map.getSource("power-line").setData({
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    type: "MultiLineString",
                    coordinates: features
                  }
                }
              ]
            });

          });
      });
    }
  }
};

</script>

<style scoped lang="less">
.homePageCards {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 5px;

  #map {
    border-radius: 5px;
  }
}
.full {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.654901960784314);
  .full-boxs {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    z-index: 9;
    background-color: rgba(255, 255, 255, 0.654901960784314);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 5px;

    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }
}
.grollDiv {
  // width: 240px;
  // height: 10%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 10px;
  left: 10px;
  z-index: 9;
  color: #fff;
  font-size: 12px;
  // line-height: 25px;
  padding: 10px;
  padding-top: 0;
  border-radius: 5px;

  .flex-warp {
    flex-wrap: wrap;
  }

  .checklist {
    display: flex;
    align-items: center;
    // width: 120px;
    margin-top: 15px;
    box-sizing: border-box;
    text-align: center;

    input {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      cursor: pointer;
    }

    span {
      color: #000;
    }
  }
}

input[type="checkbox"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
}

input[type="checkbox"]::after {
  position: absolute;
  top: 0;
  color: #000;
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 3px;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  background-color: #0649d7;
}

.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
</style>
